import { Component, Inject, ChangeDetectorRef } from '@angular/core';
import { IonicPage, ModalController } from 'ionic-angular';
import { Subscription } from 'rxjs/Subscription';
// picker
import { convertEnumToColumn } from 'ion-multi-picker';
// 枚举
import { BankNameEnum } from '../../../config/enum';
// service
import { HideBarsService } from '../../../providers/utils/hideBars.service';
import { Auth, User } from '../../../providers/entity/user.model';
import { Observable } from "rxjs/Observable";
// 常量
import * as PageConstant from '../../../constant/pageConstant';

/**
 * 绑定银行卡
 */
@IonicPage()
@Component({
  selector: 'page-bind-bank',
  templateUrl: 'bind-bank-card.html',
})
export class BindBankCardPage {

  // 教育背景
  private bankGrade: Array<any>;
  private initGrade: any;

  // 是否验证
  private bankState: any;
  // 用户信息
  private idInfo: any;
  // 绑定银行卡
  private bankInfo: any;
  // 监听 用户信息
  private userSubscription: Subscription;
  constructor(
    public modalCtrl: ModalController,
    private hideBars: HideBarsService,
    @Inject('user') private userService,
    @Inject('auth') private authService,
    private ref: ChangeDetectorRef,
  )
  {
    this.userSubscription=
      Observable.combineLatest(this.authService.getAuth(),
      this.userService.getUser(),(auth: Auth, user: User)=>{
        const username = auth['login'].username;
        const { idInfo, bankState, bankInfo }= user;
        return { username, idInfo, bankState, bankInfo};
      })
      .subscribe(data=>{
        debugger;
        this.bankState= data.bankState;
        this.idInfo= data.idInfo;
        this.bankInfo= data.bankInfo;
        this.bankInfo.bankphone= data.username;
        let bankName = data.bankInfo.bankName? data.bankInfo.bankName: '中国建设银行';
        this.initPicker(bankName);
      });
  }

  ionViewDidLoad() {
  }

  /*** 初始化picker
   * @param bankName 初始化值
   * */
  initPicker(bankName: string)
  {
    this.initGrade = BankNameEnum[bankName];
    this.bankGrade = convertEnumToColumn(BankNameEnum);
  }

  /*** 页面进入
   * */
  ionViewWillEnter()
  {
    this.hideBars.changeTabBarsElementBottom('-5rem');
  }

  /*** 页面离开
   * */
  ionViewWillLeave()
  {
    debugger;
    this.hideBars.changeTabBarsElementBottom('0');
    if(typeof this.userSubscription !== 'undefined')
      this.userSubscription.unsubscribe();
  }

  /**
  * */
  inputText(event){
    debugger;
    // 当是删除时
    if(event.inputType === 'deleteContentBackward'){
      const str= this.bankInfo.bankNo;
      let result= str.substring(0, str.length-1);
      this.bankInfo.bankNo= result;
      this.ref.detectChanges();
      return;
    }
    if(!event.data) return;
    this.bankInfo.bankNo+= event.data;
    this.ref.detectChanges();
  }

  executeSave(){
    const { realname, idNo }= this.idInfo;
    const { bankNo, bankphone }= this.bankInfo;
    const bankName= this.bankGrade[0].options[this.initGrade].text;
    debugger;

    let modal = this.modalCtrl.create(PageConstant.BindBankApplyPage, {
      data: { bankNo, bankphone, bankName, realname, idNo }
    },{
      showBackdrop: false,
      enableBackdropDismiss: false,
    });
    // modal.onDidDismiss(data => {
    //   debugger;
    // });
    modal.present();
  }

}
